<template>
    <div>
        <el-container class="common-layout">
            <el-main>
                <div class="divs">
                    <span class="title">
                        <el-icon>
                            <House />
                        </el-icon>
                        统计报表/<span style="color: #0098FF;">司机业绩统计</span>
                    </span>
                </div>
                <div
                    style="background-color: #F5F9FF;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="选择日期:" prop="value">
                                <el-date-picker v-model="time" type="daterange" range-separator="To"
                                    start-placeholder="请选择日期" end-placeholder="请选择日期" :size="size"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="Time" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <!-- <div>
                    <div style="padding-right: 1000px;">
                        <span style="font-size: 20px;">订单趋势</span>
                    </div>
                    <div ref="chartRef" style="width: 1200px;height:400px;"></div>
                </div> -->
                <div>
                    <!-- <div style="padding-right: 1000px;">
                        <span style="font-size: 20px;">订单列表</span>
                    </div> -->
                    <div style="padding-left: 90px;">
                        <el-table :data="tableData" style="width: 1200px;height: 410px;">
                            <!-- <el-table-column type="selection" width="55" /> -->
                            <!-- <el-table-column property="ord_id" label="订单id" width="120" v-if="false" /> -->
                            <el-table-column property="dv_id" label="司机id" width="" />
                            <el-table-column property="dv_name" label="司机姓名" width="" />
                            <el-table-column property="dv_phone" label="手机号码" width="" />
                            <el-table-column property="wb_count" label="运单完成数量" width="" />
                            <el-table-column property="time_wb_count" label="按时完成数" width="" />
                            <el-table-column property="punctuality_rate" label="准时率" width="" />
                            <el-table-column property="exception_wb" label="异常运单数" width="" />
                            <el-table-column property="exception__rate" label="异常率" width="" />
                            <!-- <el-table-column property="mileage_total" label="里程合计(km)" width="120" /> -->
                        </el-table>
                    </div>
                    <div style="float: right;">
                        <el-pagination v-model:current-page="currentPage" v-model:page-size="PageSize"
                            :page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled" :background="background"
                            layout="total, sizes, prev, pager, next, jumper" :total="count"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue';
import $http from '@/axios/base.js';
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
    setup() {
        let tableData = ref([]);   //订单表数据
        let currentPage = ref(1);  //页
        let PageSize = ref(10);    //条数
        let count = ref('');   //数据总数量
        const amap = ref(); //地图函数
        const driving = ref();
        const geocoder = ref();
        let time = ref('');   //时间

        onMounted(() => {
            show5();
            show11();
        });

        function show11() {   //页面显示数据
            $http.get(`http://localhost:5261/api/Order_statistics/GetDriver_Statistics3/${currentPage.value},${PageSize.value}`).then((res) => {
                tableData.value = res;
                console.log(tableData.value[0].punctuality_rate);
                tableData.value.forEach((item, index) => {
                    tableData.value[index].punctuality_rate = (tableData.value[index].punctuality_rate).toFixed(2) + '%';
                    tableData.value[index].exception__rate = (tableData.value[index].exception__rate).toFixed(2) + '%';
                })
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function Time(value) {
            //console.log(value);
            if (value == null || value==undefined || value=='') {
                show11();
                show5();
            } else {
                $http.get(`http://localhost:5261/api/Order_statistics/GetDriver_Statistics2/${currentPage.value},${PageSize.value}?Create_time=${value}`).then((res) => {
                    tableData.value = res;
                    show12(value);
                }).catch((err) => {
                    console.log("错误:" + err);
                })
            }
        }

        function show12(value){
            $http.get(`http://localhost:5261/api/Order_statistics/GetOrder_Count/${value}`).then((res)=>{
                count.value=res;
            }).catch((err)=>{
                console.log("错误:" + err);
            })
        }

        function show() {   //显示数据
            $http.get(`http://localhost:5261/api/Order_statistics/GetDriver_Statistics/${currentPage.value},${PageSize.value}`).then((res) => {
                tableData.value = res;
                show10();
                show2();
                show3();
                show6();
                show8();
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function show2() {  //根据司机id查询司机姓名和手机号
            tableData.value.forEach((item, index) => {
                $http.get(`http://localhost:5261/api/Order/GetDrivers_Ments_id/${item.dv_id}`).then((res) => {
                    tableData.value[index].dv_name = res[0].dv_name;
                    tableData.value[index].dv_phone = res[0].dv_emg_ph;
                }).catch((err) => {
                    console.log("错误:" + err);
                })
            })
        }

        function show3() {    //查询按时完成的订单
            tableData.value.forEach((item, index) => {
                $http.get(`http://localhost:5261/api/Order_statistics/GetWb_ment`).then((res) => {
                    tableData.value[index].time_wb_count = res[0].time_wb_count;
                    show4();
                }).catch((err) => {
                    console.log("错误:" + err);
                })
            })
        }

        function show4() {   //计算准时率
            tableData.value.forEach((item, index) => {
                tableData.value[index].punctuality_rate = item.wb_count > 0 ? (item.time_wb_count / item.wb_count * 100).toFixed(2) + '%' : '0%';
            })
        }

        function show6() {   //查询异常的运单数
            tableData.value.forEach((item, index) => {
                $http.get(`http://localhost:5261/api/Order_statistics/GetException_log/${item.dv_id}`).then((res) => {
                    if (res == '' || res == undefined) {
                        tableData.value[index].exception_wb = 0;
                    } else {
                        tableData.value[index].exception_wb = res[0].exception_wb;
                    }
                    show7();
                })
            })
        }

        function show7() {
            tableData.value.forEach((item, index) => {
                tableData.value[index].exception__rate = item.wb_count > 0 ? (item.exception_wb / item.wb_count * 100).toFixed(2) + '%' : '0%'
            });
        }

        function show5() {   //查询数据总数量
            $http.get(`http://localhost:5261/api/Order_statistics/GetOrder_Count`).then((res) => {
                count.value = res;
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        const show8 = () => {
            // window._AMapSecurityConfig = {
            //     securityJsCode: "1c556528b78305b472619a14534e47a6",
            // };
            // AMapLoader.load({
            //     key: "1a1bf22816ee91a0ac4f00ffb1811f7c", // 替换为你自己的高德地图AK密钥
            //     version: "2.0", // 指定要加载的 JSAPI 的版本
            //     plugins: ["AMap.MoveAnimation", "AMap.TrafficLayer"], // 需要使用的插件列表，如驾车导航'AMap.Driving'等
            //     AMapUI: {
            //         // 如果需要使用 AMapUI，可以在这里配置相关参数，如版本号等。如果不使用，可以忽略这部分配置。
            //         version: "1.1", // 指定要加载的 AMapUI 的版本号，默认为最新版本。
            //         // 其他配置项，如资源文件的路径等，可以根据需要进行配置。具体可参考官方文档。
            //     },
            //     Loca: {
            //         // 如果需要使用 Loca，可以在这里配置相关参数，如版本号等。如果不使用，可以忽略这部分配置。
            //         version: "2.0", // 指定要加载的 Loca 的版本号，默认为最新版本。
            //         // 其他配置项，如资源文件的路径等，可以根据需要进行配置。具体可参考官方文档。
            //     },
            // })
            //     .then((AMap) => {
            //         amap.value = AMap;
            //         initAMap();
            //     })
            //     .catch((e) => {
            //         console.log(e); // 处理加载错误
            //     });
        }

        const initAMap = () => {
            // geocoder.value = new Promise((resolve) => {
            //     amap.value.plugin(["AMap.Geocoder"], () => {
            //         resolve(
            //             // new AMap.Geocoder({
            //             //   city: "010", //城市设为北京，默认：“全国”
            //             // })
            //             new amap.value.Geocoder()
            //         );
            //     });
            // });

            // amap.value.plugin("AMap.Driving", function () {
            //     driving.value = new amap.value.Driving({
            //         policy: 0, //驾车路线规划策略，0是速度优先的策略
            //     });
            // });
            // getlnglat();
        };

        const getlnglat = () => {
            // console.log("====");
            // driving.value.search(
            //     [112.982489, 28.203089],
            //     [116.484648, 39.999861],
            //     function (status, result) {
            //         //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
            //         //查询成功时，result 即为对应的驾车导航信息
            //         console.log("路径状态：" + status);
            //         console.log(result);
            //     }
            // );
        };

        const geoCode = async (address1, address2, index2) => {
            // const address = [address1, address2];
            // if (geocoder.value == undefined) {
            //     geocoder.value = new Promise((resolve) => {
            //         amap.value.plugin(["AMap.Geocoder"], () => {
            //             resolve(new amap.value.Geocoder());
            //         });
            //     });
            // }
            // const geocoderInstance = await geocoder.value;
            // address.forEach((item, index) => {
            //     geocoderInstance.getLocation(item, (status, result) => {
            //         if (status === "complete" && result.geocodes.length) {
            //             const lnglatValue = result.geocodes[0].location;
            //             lnglat.value = lnglatValue;
            //             index == 0 ? tableData.value[index2].shifadi = item : tableData.value[index2].mudidi;
            //             console.log(startLngLat.value);
            //         } else {
            //             console.error("根据地址查询位置失败");
            //         }
            //     });
            // })
        };

        let Origin_place = ref('');   //始发地
        let Det_place = ref('');   //目的地
        const show10 = () => {
            // tableData.value.forEach((item, index) => {
            //     $http.get(`http://localhost:5261/api/Order_statistics/GetWb_Meters/${item.dv_id}`).then((res) => {
            //         Object.assign(tableData.value[index], [res[index].origin_place, res[index].det_place])
            //         tableData.value.forEach((item2, index2) => {
            //             geoCode(item2.origin_place, item2.det_place, index2);
            //         })
            //     }).catch((err) => {
            //         console.log("错误:" + err);
            //     })
            // });
        }

        function handleSizeChange(value) {   //条数的改变事件
            PageSize.value = value;
            show();
        }

        function handleCurrentChange(value) {   //页面的改变事件
            currentPage.value = value;
            show();
        }



        return {
            tableData,
            currentPage,
            PageSize,
            count,
            handleSizeChange,
            handleCurrentChange,
            Det_place,
            Origin_place,
            time,
            Time
        };
    }
}
</script>

<style scoped>
.common-layout {
    /* box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5); */
    background-color: #fff;
    height: 700px;
    width: 1250px;
    margin: auto;
    padding: auto;
    /* margin: 50px; */
    /* display: flex;
    align-items: center; */
}

.title {
    padding-right: 1000px;
    padding-top: 20px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    background-color: aqua;
}
</style>